<!--
 *  ┌───┐   ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┐
 *  │Esc│   │ F1│ F2│ F3│ F4│ │ F5│ F6│ F7│ F8│ │ F9│F10│F11│F12│ │P/S│S L│P/B│  ┌┐    ┌┐    ┌┐
 *  └───┘   └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┘  └┘    └┘    └┘
 *  ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐ ┌───┬───┬───┐ ┌───┬───┬───┬───┐
 *  │~ `│! 1│@ 2│# 3│$ 4│% 5│^ 6│& 7│* 8│( 9│) 0│_ -│+ =│ BacSp │ │Ins│Hom│PUp│ │N L│ / │ * │ - │
 *  ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤ ├───┼───┼───┤ ├───┼───┼───┼───┤
 *  │ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [│} ]│ | \ │ │Del│End│PDn│ │ 7 │ 8 │ 9 │   │
 *  ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤ └───┴───┴───┘ ├───┼───┼───┤ + │
 *  │ Caps │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  │               │ 4 │ 5 │ 6 │   │
 *  ├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────────┤     ┌───┐     ├───┼───┼───┼───┤
 *  │ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│  Shift   │     │ ↑ │     │ 1 │ 2 │ 3 │   │
 *  ├─────┬──┴─┬─┴──┬┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤ ┌───┼───┼───┐ ├───┴───┼───┤ E││
 *  │ Ctrl│    │Alt │         Space         │ Alt│    │    │Ctrl│ │ ← │ ↓ │ → │ │   0   │ . │←─┘│
 *  └─────┴────┴────┴───────────────────────┴────┴────┴────┴────┘ └───┴───┴───┘ └───────┴───┴───┘
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-18 18:01:13
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-25 16:31:28
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <el-input v-model="model.name" placeholder="模板名称" class="input-field">
      <el-button
        slot="append"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      ></el-button>
    </el-input>
    <el-card shadow="never" class="card">
      <div class="field-list">
        <ul ref="ul1" class="button-field">
          <li
            v-for="(item, index) in 30"
            :key="index"
            :class="{ checked: index === currentKey1 }"
            @click="currentKey1 = index"
          >
            {{ index === 0 ? '全部行业' : '行业' + index }}
          </li>
        </ul>
        <el-button type="text" @click="handleShowMore('1')">
          更多
          <i :class="`el-icon-arrow-${currentArrow1}`"></i>
        </el-button>
      </div>
      <div class="field-list" style="margin-top: 12px">
        <ul ref="ul2" class="button-field">
          <li
            v-for="(item, index) in 30"
            :key="index"
            :class="{ checked: index === currentKey2 }"
            @click="currentKey2 = index"
          >
            {{ index === 0 ? '全部场景' : '场景' + index }}
          </li>
        </ul>
        <el-button type="text" @click="handleShowMore('2')">
          更多
          <i :class="`el-icon-arrow-${currentArrow2}`"></i>
        </el-button>
      </div>
    </el-card>

    <ul v-loading="loading" class="product-list">
      <li v-for="item in productList" :key="item.id">
        <div class="img"><img :src="item.img" /></div>
        <div class="title">{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
        <div class="btn">
          <el-button type="primary">添加到消息模板</el-button>
        </div>
      </li>
    </ul>
    <el-pagination
      style="text-align: right; margin-top: 20px"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: 'Shopping',
  data() {
    return {
      loading: false,
      currentArrow1: 'down',
      currentArrow2: 'down',
      currentKey1: 0,
      currentKey2: 0,
      model: {
        name: '',
      },
      currentPage: 1,
      productList: [
        {
          id: 1,
          img: 'https://fontdo-rcs.oss-cn-shenzhen.aliyuncs.com/76ee3de97a1b8b903319b7c013d8c877/passport/user/identity/43ba9dae42ac46529068f3388a3113af.jpeg',
          title: 'AI审核',
          desc: 'AI审核，可对文本、语音、图片、视频、文章等内容进行自动审核， 节省人工审核成本，提升审核效力，按次收费，10000次,15元',
          price: 20,
        },
        {
          id: 2,
          img: 'https://fontdo-rcs.oss-cn-shenzhen.aliyuncs.com/76ee3de97a1b8b903319b7c013d8c877/passport/user/identity/d8dcf892a5df410a912c3212a83de90a.jpeg',
          title: '身份证识别能力',
          desc: '根据用户上传的身份证图片，识别出用户的身份证号码',
          price: 0.5,
        },
      ],
    }
  },
  methods: {
    handleShowMore(key) {
      const ref = this.$refs['ul' + key]
      const arrow = 'currentArrow' + key
      const wrap = ref.style['flex-wrap']

      if (!wrap || wrap === 'nowrap') {
        ref.style['flex-wrap'] = 'wrap'
        this[arrow] = 'up'
      } else {
        ref.style['flex-wrap'] = 'nowrap'
        this[arrow] = 'down'
      }
    },
    async handleSearch() {
      this.loading = true
      await new Promise(rs => {
        setTimeout(rs, 500)
      })
      this.loading = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>
<style lang="scss" scoped>
.input-field {
  width: 560px;
  .el-button {
    width: 56px;
    color: #fff;
    background: $primary;
    border: 1px solid $primary;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.card {
  margin-top: 20px;
}
.field-list {
  display: flex;
  align-items: flex-start;
}
.button-field {
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;

  margin-right: 40px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  list-style: none;
  li {
    margin: 4px 8px 4px 0;
    padding: 4px 6px;
    border-radius: 2px;
    cursor: pointer;
    &:hover {
      color: $primary;
    }
    &.checked {
      background: $primary;
      color: #fff;
    }
  }
}
.product-list {
  margin: 10px -10px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  li {
    list-style: none;
    width: 240px;
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
    border: 1px solid #f0f0f0;
    font-size: 14px;
    cursor: pointer;
    &:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    .img {
      height: 160px;
      text-align: center;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .title {
      margin: 10px 0;
      font-size: 16px;
    }
    .desc {
      height: 64px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      color: #999;
    }
    .btn {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
